<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>端子计算(4端子)</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>

    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>


<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <input type="range" value="0" max="360" min="0" step="1" oninput="rotate(event)">【点住符号可拖动】
</div>
</body>

</html>

<script>

    mapOptions = {
        zoom: 20,
        center: [118.16953496070641, 24.461226692660446]
    }

    var pointDev = null
    var lineDev = null
    var testDatas = null
    var symbolLayer = null

    var isMoving = false

    function rotate(e) {
        let angle = e ? Number(e.target.value) : pointDev.symbolRotate
        pointDev.symbolRotate = angle
        pointDev.refresh()
        let terminalPoints = egisV2.util.DataUtil.calcDeviceTerminal(
            pointDev.symbolId,//符号ID
            pointDev.attributes.sbzlx,//设备子类型（不是类型，是子类型）
            {lng: pointDev.getGeometry()[0], lat: pointDev.getGeometry()[1]},//符号中心点
            angle,//符号角度（代表顺时针角度）
            pointDev.symbolSize,//符号大小（这里不需要除以二）
            1.25//如果端子的位置和实际位置有略微偏差，可以设置这个值来放大或缩小端子的偏移量，默认值为1（按端子配置来）
        )
        //修改线坐标中对应的点
        let lineGeom = lineDev.getGeometry()
        lineGeom[0][1] = [terminalPoints[0].lng, terminalPoints[0].lat]
        lineGeom[1][1] = [terminalPoints[1].lng, terminalPoints[1].lat]
        lineGeom[2][1] = [terminalPoints[2].lng, terminalPoints[2].lat]
        lineGeom[3][1] = [terminalPoints[3].lng, terminalPoints[3].lat]
        lineDev.setGeometry(lineGeom)
    }


    function onMouseMove(e) {
        if (isMoving) {
            //获取当前位置
            let movingPoint = [e.lngLat.lng, e.lngLat.lat]
            //更新点设备位置
            pointDev.setGeometry(movingPoint)

            rotate()
        }

    }


    function initPage() {
        pointDev = new egisV2.symbol.ElePointSymbol({
            devId: 'a001',//oid，psrid
            devTypeId: '3215000',//设备类型
            symbolId: "4080010",//符号ID
            symbolRotate: 0,//旋转角度
            symbolSize: 2,//大小
            symbolColor: '#ff0000',//颜色
            symbolOpacity: 1,//透明度
            symbolScalable: true,//缩放
            coordinates: [118.16953496070641, 24.461226692660446],//坐标
            attributes: {sbzlx: '30600006'}//其它信息
        })

        lineDev = new egisV2.symbol.EleLineSymbol({
            devId: 'b20fdfds001',//oid，psrid
            devTypeId: '354219fdsfds85',//设备类型
            symbolId: '410',//符号ID
            symbolWidth: 6,//线宽
            // convertSize:false,//栅格数据所需使用的参数
            symbolColor: '#ff0000',//颜色
            symbolOpacity: 1,//透明度
            coordinates: [
                [[118.16933496070641, 24.461226692660446], [118.16953496070641, 24.461226692660446]],
                [[118.17253496070641, 24.464226692660446], [118.16953496070641, 24.461226692660446]],
                [[118.17033496070641, 24.461126692660446], [118.16953496070641, 24.461216692660446]],
                [[118.16933496070641, 24.461216692660446], [118.16953496070641, 24.461216692660446]]
            ],//坐标
            attributes: {c: 3, d: 4}//其它属性
        })
        testDatas = [
            lineDev,
            pointDev
        ]

        symbolLayer = new egisV2.layer.SymbolLayer(map)
        symbolLayer.addEleDevs(testDatas)

        map.on('mousedown', pointDev.getLayerKey(), e => {
            map.dragPan.disable()
            isMoving = true
            map.on('mousemove', onMouseMove)
            console.log('mousedown', e)
        })

        map.on('mouseup', e => {
            map.dragPan.enable()
            isMoving = false
            map.off('mousemove', onMouseMove)
            console.log('mouseup', e)
        })


        rotate()
    }

    window.onload = function () {
        loadGeoMap(initPage)
    }

</script>
